import React from 'react';
import { View, StyleSheet } from 'react-native';
import { useRoute, useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import DeckDetail from '../modules/deck/DeckDetail';
import { Deck } from '../modules/deck/types';
import { colors } from '../styles';

type DeckScreenNavigationProp = NativeStackNavigationProp<
  RootStackParamList,
  'Review',
  'DeckDetail'
>;
type RootStackParamList = {
  Review: { deck: Deck }; // 定义Review路由的参数类型
  DeckDetail: { deck: Deck };
};
const DeckDetailScreen: React.FC = () => {
  const route = useRoute();
  const navigation = useNavigation<DeckScreenNavigationProp>();
  const { deck } = route.params as { deck: Deck };
  const handleStartReview = () => {
    navigation.navigate('Review', { deck });
  };
  const handleBack = () => {
    navigation.goBack();
  };
  return (
    <View style={styles.container}>
      <DeckDetail
        deck={deck}
        onStartReview={handleStartReview}
        onBack={handleBack}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background,
  },
});

export default DeckDetailScreen;
